import React , { Component } from 'react';
import './userCenterPages.css';
import { Form, Input, Button} from 'antd';


class UserInfo extends Component {

  onFinish = values => {
    console.log('Success:', values);
  };

  render() {
    const layout = {
      wrapperCol: { span: 14 },
    };
    return (
      <div className="user-info-wrapper">
        <h1>个人信息</h1>
        <div className="form-wrapper">
          <div className="form-half">
          <Form 
              {...layout} 
              ref={this.formRef}   
              name="control-ref"   
            > 
              <Form.Item 
                name="user_id" 
              >
                <span>工号</span>
                <Input className="input" disabled/>
              </Form.Item>   
              <Form.Item 
                name="user_role" 
              >
                <span>角色</span>
                <Input className="input" disabled/>
              </Form.Item>
              <Form.Item 
                name="org_id" 
              >
                <span>所属组织</span>
                <Input className="input" disabled/>
              </Form.Item>
            </Form>
          </div>
          <div className="form-half">
          <Form 
              {...layout} 
              ref={this.formRef}   
              name="control-ref" 
              onFinish={this.onFinish}
              
            > 
              <Form.Item 
                name="user_name" 
              >
                <span>姓名</span>
                <Input className="input"/>
              </Form.Item>

              <Form.Item 
                name= "user_email"  
              >
                <span>邮箱</span>
                <Input placeholder="请输入电子邮箱" className="input"/>
              </Form.Item>

              <Form.Item
                name="user_mobile"
              >
                <span>手机号码</span>
                <Input placeholder="请输入手机号码" className="input"/>
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit" className="button">
                  <span>保存</span>
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    )
  }
}

export default UserInfo;